<style>
    div#test { position: absolute; top: 0; left: 0; color: green; border: 50px solid; width: 0; transition-duration: 1ms; }
    div#test.orange { border-color: orange; }
</style>
<div style="position: relative; background-color: red; width: 100px; height: 100px;">
    <div id="test" class="orange"></div>
</div>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    // Force a layout so that changing the classname below causes an animation.
    document.body.offsetHeight;

    document.getElementById("test").addEventListener('transitionend', function() {
        if (window.testRunner)
            setTimeout("testRunner.notifyDone()", 0);
    }, false);

    document.getElementById("test").className = "";
</script>
